<template>
	<view class="">
		<view class="title-box"><sun-tietleBox :tietleData="'商品明细共' + (resData.shopLen || 0) + '条'" :showLine="false"></sun-tietleBox></view>
		<view :id="idTopHeight" class="table-box f-column" :style="{ padding: 0 + ' ' + tableMargin + 'rpx' }">
			<!-- 撑满屏幕 -->
			<!-- :height="topHeight - (tableMargin * 2) +'rpx'" -->
			<wyb-table
				ref="table"
				:width="'710rpx'"
				:defaultColWidth="defaultColWidth"
				:headers="headers"
				:contents="resData.shop"
				:header-bg-color="'#128A80'"
				:header-ft-color="'#ffffff'"
				:loading="false"
				:first-line-fixed="false"
				:maxHeight="topHeight - tableMargin * 2 + 'rpx'"
				:min-height="[65, 50]"
				
			/>
			<view class="toastTitle">{{ query.toastTitle }}</view>
		</view>
		<view class="title-box"><sun-tietleBox :tietleData="'支付明细'" :showLine="false"></sun-tietleBox></view>
		<view class="pay-box">
			<view class="pay-item f-row-Hcenter f-row-between" v-for="itme in resData.pay">
				<view>现金：</view>
				<view class="f-row-Hcenter">
					<label>￥</label>
					<label>{{ itme.real_amt | toFIex }}</label>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import sunTietleBox from '@/components/sun-titleBox/sun-tietleBox.vue';
import wybTable from '@/components/wyb-table/wyb-table.vue';
export default {
	components: {
		wybTable,
		sunTietleBox
	},
	data() {
		return {
			//表格高度变量
			idTopHeight: 'table-box',
			tableMargin: 20,
			topHeight: 100,
			//平分表宽
			defaultColWidth: 167,

			optionLoad: {},
			query: {
				branch_jg: '', //机构 支持%为全部机构
				start_date: 10000000,
				end_date: 10000000,
				oper_no: '%', // varchar(4) 收银员 默认传%表示全部
				ischange: true, // 是 bool 请求参数是否修改，如果为false证明文档中的参数没修改，就不查询count，反之查询新的count

				pageindex: 1, // 是 int 页号
				pagesize: 999999 // 是 int 页大小 如果想一次性查询全部时，此参传入999999
			},
			headers: [
				{
					label: '商品名称',
					key: 'item_name',
					width: 230,
					widthInit:230
				},
				{
					label: '单价',
					key: 'real_prc'
				},
				{
					label: '数量',
					key: 'sale_qty'
				},
				{
					label: '小计',
					key: 'real_amt'
				}
			],
			resData: {
				shop: [],
				pay: []
			}
		};
	},
	onLoad: function(option) {
		this.optionLoad = option;
		this.optionLoad.sheet_no = this.optionLoad.sheet_no || '';
		this.query = { ...this.query, ...this.optionLoad };
		this.$util.getDefaultColWidth(this, 710, 'headers', 'defaultColWidth');
		this.getlogin();
	},
	methods: {
		getlogin() {
			if (!this.optionLoad.sheet_no) {
				uni.navigateBack({});
			} else {
				this.query.sheet_no = this.optionLoad.sheet_no;
			}
			let query = this.query;
			this.$api_server.dwzy_GetAppSaleDetailPay({
				data: query,
				success: res => {
					if (res.data) {
						//收银合计
						res.data.data.find(item => {
							if (item.detail_type == 1) {
								this.resData.shop.push(item);
							} else if (item.detail_type == 2) {
								this.resData.pay.push(item);
							}
						});
						this.resData.shopLen = this.resData.shop.length;

						this.$util.getTopHeight(this, this.idTopHeight, this.tableMargin);
					}
				},
				fail(error) {
					console.log('rerror>>>', error);
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
@charset "UTF-8";

.title-box {
	margin: 0 20upx;
}
.pay-box {
	margin: 0 20upx;
	border-radius: 10upx;
	padding: 20upx;
	background: rgba(255, 255, 255, 1);
	.pay-item {
		border-bottom: 1px solid rgba(226, 226, 226, 0.8);
		&:last-child{
			border-bottom: 0px; 
		}
	}
}
</style>
